import { ReactNode } from 'react';
import { useTheme } from '../context/ThemeContext';
import ThemeToggle from './ThemeToggle';
import { useRouter } from 'next/router';

interface DashboardLayoutProps {
    children: ReactNode;
    sidebarContent: ReactNode;
}

const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, sidebarContent }) => {
    const { theme } = useTheme();
    const router = useRouter();

    return (
        <div style={{ 
            display: 'flex', 
            height: '100vh', 
            backgroundColor: theme === 'light' ? '#f9f9f9' : '#343a40', 
            color: theme === 'light' ? '#000' : '#fff' 
        }}>
            <ThemeToggle />

            {/* 左侧栏 */}
            <div style={{
                width: '300px',
                borderRight: '1px solid #eee',
                padding: '20px',
                backgroundColor: theme === 'light' ? '#fff' : '#495057',
                display: 'flex',
                flexDirection: 'column'
            }}>
                {/* 主要内容区域 */}
                <div style={{ flex: 1, overflowY: 'auto' }}>
                    {sidebarContent}
                </div>

                {/* 底部按钮区域 */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                    <button 
                        onClick={() => router.push('/settings')}
                        style={{
                            padding: '10px',
                            backgroundColor: '#6c757d',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            width: '100%'
                        }}
                    >
                        个人设置
                    </button>
                    <button 
                        onClick={() => {
                            localStorage.removeItem('token');
                            localStorage.removeItem('username');
                            localStorage.removeItem('userId');
                            router.push('/login');
                        }}
                        style={{
                            padding: '10px',
                            backgroundColor: '#dc3545',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            width: '100%'
                        }}
                    >
                        登出
                    </button>
                </div>
            </div>

            {/* 右侧内容区域 */}
            <div style={{ 
                flex: 1,
                padding: '20px',
                backgroundColor: theme === 'light' ? '#f9f9f9' : '#343a40',
                overflowY: 'auto'
            }}>
                {children}
            </div>
        </div>
    );
};

export default DashboardLayout; 